/**
* @desc:  增加设备升级、编辑、查看
* @author qiankui
* @date 2023-4-19 14:11:31
*/
<template>
  <el-dialog :close-on-click-modal="false" :visible="checkFlag" class="zdy-dialog" width="60%"
             title="升级详情" :before-close="handleCloseDialog">
    <el-form :inline="true" :model="form" ref="form" class="demo-form-inline">
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="form.deviceName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="form.state" placeholder="请选择">
          <el-option v-for="item in upgradeStatusList" :label="$t(item.label)" :key="item.label" :value="item.value"></el-option>
<!--          <el-option label="在线" value="1"></el-option>-->
<!--          <el-option label="离线" value="2"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item class="BlankPlaceholder formOperationButtons" label=".">
        <el-button size="small"  type="primary" :loading="searchLoading" @click="search">查询</el-button>
        <el-button size="small"  @click="reset" :disabled="searchLoading">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
        v-loading="searchLoading"
        :element-loading-background="elLoadingConfig.background"
        class="devList"
        stripe
        ref="multipleTable"
        height="calc(100vh - 500px)"
        :data="tableData"
        style="width: 100%">
      <!--          设备名称-->
      <el-table-column
          show-overflow-tooltip
          prop="deviceName"
          :label="$t('Device name')">
        <template slot-scope="scope">
          <span>{{scope.row.deviceName||'-'}}</span>
        </template>
      </el-table-column>
      <!--          序列号-->
      <el-table-column
          show-overflow-tooltip
          prop="address"
          :label="$t('Serial number')">
        <template slot-scope="scope">
          <span>{{scope.row.deviceCode||'-'}}</span>
        </template>
      </el-table-column>
      <!--          状态-->
      <el-table-column
          prop="address"
          :label="$t('status')">
        <template slot-scope="scope">
          <span class="StatusText" :class="scope.row.updataState == 1?'successStatusText':scope.row.updataState == 2?'failStatusText':'primaryStatusText'">
            {{updataStateFilterFn(scope.row.updataState)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          class="tableRightTool"
          label="操作"
          width="100">
        <template slot-scope="scope" class="tableRightIcon">
          <el-link icon="iconfont-KUI icon-eye tableRightIcon" type="primary" title="详情" :underline="false" @click="upgradeDetailsFn(scope.row)"></el-link>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 20px">
      <el-pagination
          :disabled="searchLoading"
          style="display: inline-block;float: right"
          small
          background
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleRightCurrentChange"
          :current-page.sync="form.pageNumber"
          :page-size="form.pageSize"
          layout="sizes,total, prev, pager, next, jumper"
          :total="formPageTabletotal"
          :page-sizes="[10, 20, 50, 100]"
      ></el-pagination>
    </div>
    <upgradeDetails :editTableRowSub='editTableRowSub' :upgradeDetailsFlag.sync='upgradeDetailsFlag' v-if='upgradeDetailsFlag'></upgradeDetails>
  </el-dialog>
</template>

<script>
import i18n from "@/lang/index"
import {deviceUpdateStatus} from '@/assets/common/js/utils/deviceConfig.js'
import {deviceversionSearchdeviceupgradedetails} from "@/api/pcmj/sbsj"
import upgradeDetails from "@/views/sbgl/sbsj/upgradeDetails.vue";
export default {
  name: "check",
  components: {
    upgradeDetails
  },
  props: {
    updataStateFilterFn:{
      type:Function,
      default:()=>{

      }
    },
    checkFlag: {
      type: Boolean,
      default: false
    },
    editTableRow: {
      type: Object,
      defautl: () => {
        return {}
      }
    }
  },
  watch: {

  },
  filters:{

  },
  data() {
    return {
      searchLoading:false,
      editTableRowSub:null,
      upgradeStatusList:[],
      tableData:[],
      upgradeDetailsFlag:false,
      saveloading:false,
      formPageTabletotal:0,
      form:{
        pageNumber:1,
        pageSize:10,
        deviceVersionId:null,
        deviceName:null,
        state:-1
      }
    }
  },
  mounted() {
    this.upgradeStatusList=deviceUpdateStatus
    this.form.deviceVersionId=this.editTableRow.id
    this.search()
  },
  methods: {
    // updataStateFilter(val){
    //   console.log('值',val);
    //   var res=""
    //   deviceUpdateStatus.map(item=>{
    //     if (item.value==val){
    //       res=item.label
    //     }
    //   })
    //
    //   if (res){
    //     return i18n.t(res)
    //   }else{
    //     return '-'
    //   }
    // },
    upgradeDetailsFn(row){
      this.editTableRowSub=row
      this.upgradeDetailsFlag=true
    },
    deviceversionSearchdeviceupgradedetails(params){
      this.searchLoading=true
      deviceversionSearchdeviceupgradedetails(params).then(res=>{
        if (res.code==200){
          this.formPageTabletotal=res.data.totalCount
          // res.data.values[0].updataState=2
          this.tableData=res.data.values
        }
      }).catch().finally(()=>{
        setTimeout(()=>{
          this.searchLoading=false
        },500)
      })
    },
    reset(){
      this.form.pageNumber=1
      this.form.pageSize=10
      this.$refs.form.resetFields()
      console.log(this.form);
      this.search()
    },
    handleRightCurrentChange(val) {
      this.form.pageNumber = val;
      this.search()
    },
    handleSizeChange(val) {
      this.form.pageSize = val
      // this.filterImgToBase64()
      console.log(`每页 ${val} 条`);
      this.search()
    },
    /**
     * @description  关闭弹窗事件
     * @return not
     * @author xiongyi 2022-06-29 16:48:08
     **/
    handleCloseDialog() {
      this.$emit('update:checkFlag', false);
      // if (this.fileName) {
      //   this.$refs.upload.clearFiles()
      // }
    },
    /**
     * @description  保存
     * @param  not
     * @return not
     * @author xiongyi 2022-07-06 10:50:18
     **/
    search() {
      console.log(this.form);
      var params=JSON.parse(JSON.stringify(this.form))
      if (params.state===-1){
        params.state=null
      }
      console.log(params);
      this.deviceversionSearchdeviceupgradedetails(params)
    }
  }
}
</script>

<style scoped lang="scss">

//.dia-sc-btn {
//    background-color: transparent;
//    border: 1px dashed rgba(55, 101, 215, 0.5);
//    color: rgba(55, 101, 215, 0.5);
//}
</style>
